{include file="common/header-top" /}

<style>
    .van-grid-item__text{
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .job-item{
        display: block;
        margin-top: 5px;
    }

    .job-item-a{
        color: #2f2d33;
    }

    .job-item .job-item-img-icon {
        margin-top: 28px;
        padding-left: 10px;
    }

    .job-item .job-item-title{
        margin: 8px 0px 5px 2px;
        color: #3c3c3c;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 600;
        -webkit-line-clamp: 2;
    }
    .job-item .job-item-icon{
        font-size: small;
    }
    .job-item .job-item-span{
        color: #949595;
        font-weight: 500;
        font-size: 12px;
        padding-left: 5px;
    }
    .job-item .job-item-span-unit{
        font-size: 14px;
        color: #fcc48d;
    }

    .job-item .job-item-money-div{
        margin-top: 45px;
        float: right;
        margin-right: 5px;
    }


    .job-item .van-cell{
        padding: 0;
    }

    .job-item .van-cell:not(:last-child)::after{
        border-bottom: 0;
    }


</style>


<div id='app' v-cloak>

    <van-nav-bar title="我的收藏" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>


    <van-tabs v-model="currentTab" swipeable @click="changeTab">
        <van-tab title="兼职收藏" name="1">

            <!--兼职收藏列表-->
            <van-row>
                <van-list
                        v-model="jobLoading"
                        :finished="jobFinished"
                        finished-text="没有更多了"
                        @load="getJobCollectList"
                >
                    <van-row v-for="item in jobList" class="job-item">
                        <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a">
                            <van-col span="5">
                                <van-icon :name="item.jobTypeImg" class="job-item-img-icon" size="45px"></van-icon>
                            </van-col>

                            <van-col span="14">
                                <h4 class="job-item-title">
                                    <div class="van-ellipsis">{{item.title}}</div>
                                </h4>

                                <div class="van-hairline--left">
                                    <van-icon name="location-o" class="job-item-icon" />
                                    <span class="job-item-span" >{{item.address}}</span>
                                </div>

                                <div class="van-hairline--left">
                                    <van-icon name="clock-o" class="job-item-icon" />
                                    <span class="job-item-span">{{item.work_timeCh}}</span>
                                </div>
                                <div class="van-hairline--left">
                                    <van-icon name="fire-o" class="job-item-icon" />
                                    <span class="job-item-span">{{item.salary}}{{item.salary_unitCh}}</span>
                                </div>

                            </van-col>

                            <van-col span="5" style="text-align: right;padding-top: 20px;">
                                <van-button @click.stop.prevent="delCollect(item, 1)" type="danger" size="small">删除</van-button>
                            </van-col>
                        </a>
                    </van-row>


                </van-list>
            </van-row>
            <!--兼职收藏列表-->

        </van-tab>


        <van-tab title="二手收藏" name="2">


            <!--二手收藏列表-->
            <van-row>
                <van-list
                        v-model="usedGoodsLoading"
                        :finished="usedGoodsFinished"
                        finished-text="没有更多了"
                        @load="getUsedGoodsCollectList"
                >
                    <van-row v-for="item in usedGoodsList" class="job-item">
                        <van-card
                                :num="item.number"
                                :title="item.name"
                                :thumb="item.logo"
                                :price="item.money"
                                :origin-price="item.oprice"
                                @click="goGoodsDetail(item)"
                        >
                            <div slot="tags">
                                <van-tag type="success">{{item.marketTypeName}}</van-tag>
                            </div>
                            <div slot="footer">
                                <van-button
                                    size="small"
                                    type="danger"
                                    @click.stop="delCollect(item, 2)"
                                >删除</van-button>
                            </div>
                        </van-card>
                    </van-row>


                </van-list>
            </van-row>
            <!--二手收藏列表-->



        </van-tab>
    </van-tabs>






    {include file="common/foot-bar" /}

</div>


<script>

    Vue.use(vant.Lazyload);


    var vm = new Vue({
        el: '#app',
        data() {
            return {
                active:3,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },


                //当前列表类型
                currentType: '{$type}',
                currentTab: '{$type}',

                jobPage: 1,
                jobPageSize: 8,

                usedGoodsPage: 1,
                usedGoodsPageSize: 8,


                //兼职列表集
                jobList: [],
                jobLoading: false,
                jobFinished: false,

                //二手列表集
                usedGoodsList: [],
                usedGoodsLoading: false,
                usedGoodsFinished: false



            };
        },

        created(){
        },

        computed:{
        },

        methods:{
            //返回上一页
            goBack(){
                history.back();
            },


            goGoodsDetail(item){
                window.location.href = '/index/Market/goodsDetail?id=' + item.id;
            },



            delCollect(item, type){
                var postData = {
                    id: item.id,
                    type: type
                };
                axiosRequest.post('/api/user/delCollect', postData).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.type == 1) {
                            vm.$data.jobList.forEach(function (one, index) {
                                if (one.id == response.data.id) {
                                    vm.$data.jobList.splice(index, 1);
                                }
                            });
                        }
                        if (response.data.type == 2) {
                            vm.$data.usedGoodsList.forEach(function (one, index) {
                                if (one.id == response.data.id) {
                                    vm.$data.usedGoodsList.splice(index, 1);
                                }
                            });
                        }
                        vant.Toast('操作成功！');
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });

            },




            //切换tab
            changeTab(name, title){
                this.currentType = name;
                if (this.currentType == 1) {
                    //兼职
                    this.jobList = [];
                    this.jobPage = 1;
                    this.jobPageSize = 8;
                    this.jobLoading = true;
                    this.jobFinished = false;
                    this.getJobCollectList();
                }
                if (this.currentType == 2) {
                    //二手物品
                    this.usedGoodsList = [];
                    this.usedGoodsPage = 1;
                    this.usedGoodsPageSize = 8;
                    this.usedGoodsLoading = true;
                    this.usedGoodsFinished = false;
                    this.getUsedGoodsCollectList();
                }
            },


            //获取我收藏的二手物品列表
            getUsedGoodsCollectList(){
                var params = {
                    page: this.page,
                    pageSize: this.pageSize
                };
                axiosRequest.get('/api/user/usedGoodsCollect', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.usedGoodsList.push(item);
                            });
                            vm.$data.usedGoodsLoading = false;
                            vm.$data.usedGoodsPage += 1;

                            if (response.data.length < vm.$data.usedGoodsPageSize) {
                                vm.$data.usedGoodsFinished = true;
                                vm.$data.usedGoodsLoading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.usedGoodsFinished = true;
                            vm.$data.usedGoodsLoading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },









            //获取我收藏的兼职列表
            getJobCollectList(){
                var params = {
                    page: this.page,
                    pageSize: this.pageSize
                };
                axiosRequest.get('/api/user/jobCollect', {params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data) {
                            response.data.forEach(function (item) {
                                vm.$data.jobList.push(item);
                            });
                            vm.$data.jobLoading = false;
                            vm.$data.jobPage += 1;

                            if (response.data.length < vm.$data.jobPageSize) {
                                vm.$data.jobFinished = true;
                                vm.$data.jobLoading = false;
                            }
                        } else {
                            vant.Toast('没有更多啦！');
                            vm.$data.jobFinished = true;
                            vm.$data.jobLoading = false;
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            }


        }
    });




</script>







{include file="common/foot-bottom" /}
